
import React, { Component } from 'react';
import {
  StyleSheet, Text, View, TouchableOpacity, Image, PixelRatio
} from "react-native";
import { GLOBAL } from '../../../config/global';
import { API, API_GENERATE } from '../../../config/api';
import HTTP from '../../../utils/http';
import { style } from '../../../theme/style';
import { Common } from '../../../component/common/Common.js';
import MethodUtil from '../../../utils/MethodUtil';
// import { ScrollView } from 'react-navigation';
const scale = GLOBAL.SCALE;
export class myAccount extends Component {
  static navigationOptions = ({ navigation, navigationOptions }) => {
    return {
      headerTitle: '我的账户',
      headerTintColor: style.color.white,
      headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
      headerRight: (<Image style={style.head.headRightEmpty} source={require('../../../imgs/goBackEmpty.png')} />),
      headerStyle: {  // 头部整体样式 
        elevation: 0,
        borderBottomWidth: 0,
        backgroundColor: style.color.themeColor
      },
      headerTitleStyle: {
        flex: 1,
        textAlign: 'center'
      }
    }
  };

  constructor(props) {
    super(props);
    let { data, orderType, isForeign } = props.navigation.state.params || {};
    let { operateId } = data
    this.state = {
      res: {},
      text: '',
      money: '',
      isForeign,
      codeShow: true
    }
    this.orderType = orderType
    this.pageParams = {
      operateId,
      isForeign
    }
  }

  async componentWillMount() {
    this.initPage()
  }

  async initPage() {
    let res = await HTTP.POST(API_GENERATE(API.CAPITAL_TRANS_DETAIL), this.pageParams);
    if (res) {
      this.setState({
        res,
      })
    }
    console.log(res)
    this.changeType()
  }

  changeType() {
    let { bizType } = this.props.navigation.state.params.data || {};
    if (bizType === 'FIN_ALLOTMENT_IN') {
      this.setState({
        text: '配款订单号',
        money: '订单占用入金',
        canPress: true
      })
    }
    else if (bizType === 'FIN_ALLOTMENT_OUT') {
      this.setState({
        text: '配款订单号',
        money: '订单占用出金',
        canPress: true
      })
    }
    else if (bizType === 'FIN_TRANS') {
      this.setState({
        text: '收款单号',
        money: '买方账户出金',
        money2: '卖方账户入金',
      })
    }
    else if (bizType === 'FIN_SALES_DRAW' || bizType === 'FIN_TRANS_BACK') {
      this.setState({
        text: '收款单号',
        money: '买方账户入金',
        money2: '卖方账户出金',
      })
    }
    else if (bizType === 'FIN_BOND') {
      this.setState({
        text: '收款单单号',
        money: '保证金占用入金'
      })
    }
    else if (bizType === 'FIN_BOND') {
      this.setState({
        text: '收款单单号',
        money: '保证金占用入金'
      })
    }
    else if (bizType === 'FIN_BOND') {
      this.setState({
        text: '收款单单号',
        money: '保证金占用入金'
      })
    }
    else if (bizType === 'FIN_BOND_BACK') {
      this.setState({
        text: '收款单单号',
        money: '保证金占用出金'
      })
    }
    else if (bizType === 'FIN_DRAW') {
      this.setState({
        text: '提现到银行账户',
        money: '金额',
        codeShow: false
      })
    }
    else if (bizType === 'FIN_DRAW_BACK') {
      this.setState({
        text: '提现到银行账户退回',
        money: '金额',
        codeShow: false
      })
    }
    else if (bizType === 'FIN_INVOICE') {
      this.setState({
        text: '费用发票结算',
        money: '金额',
        codeShow: false
      })
    }
    else if (bizType === 'FIN_INVOICE_BACK') {
      this.setState({
        text: '费用发票结算退回',
        money: '金额',
        codeShow: false
      })
    }
    else {
      this.setState({
        text: '操作单单号',
        money: '金额'
      })
    }
  }

  _toMoney(num) {
    let { isForeign } = this.state
    let currency = (isForeign !== 1 ? '￥' : '$')
    if (num) {
      let str = MethodUtil.toThousands(num || 0, 2)
      let arr = str.split('')
      if (num > 0) {
        arr.splice(0, 0, currency);
      }
      else {
        arr.splice(1, 0, currency);
      }
      str = arr.join('')
      return str
    }
    else {
      return 0
    }
  }

  render() {
    let { data } = this.props.navigation.state.params || {};
    let { bizTypeName, operateTime } = data || {}
    let { res, text, money, canPress, money2, codeShow } = this.state
    return (
      <View style={styles.container}>
        <View style={[styles.flexRow, { marginTop: 46 * scale, paddingHorizontal: 23 * scale }]}>
          <Text style={styles.textStyle}>{bizTypeName}</Text>
          <Text style={[styles.listItemNum, res.operateAmount > 0 ? { color: '#CA0202', } : { color: '#19977B' }]}>{this._toMoney(res.operateAmount)}</Text>
        </View>
        <View style={styles.contentBox}>
          {!canPress || (canPress && res.orderId) ?
            <TouchableOpacity style={styles.contentItem} onPress={() => {
              if (res.orderId) {
                this.props.navigation.navigate('OrderDetailsPage', { orderId: res.orderId })
              }
            }}>
              <Text style={styles.textStyle}>{text}</Text>
              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                {canPress ?
                  <Text style={styles.textStyle}>{res.orderId}</Text>
                  :
                  <Text style={styles.textStyle}>{codeShow ? res.operateCode : ''}</Text>
                }
                {canPress && res.orderId ? <Image source={require('../../../imgs/arrow.png')} style={styles.detailImg} /> : null}
              </View>
            </TouchableOpacity>
            : null
          }

          <View style={styles.contentItem}>
            <Text style={styles.textStyle}>{money}</Text>
            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
              <Text style={styles.textStyle}>{this._toMoney(Math.abs(res.operateAmount))}</Text>
            </View>
          </View>
          {money2 ?
            <View style={styles.contentItem}>
              <Text style={styles.textStyle}>{money2}</Text>
              <Text style={styles.textStyle}>{this._toMoney(Math.abs(res.operateAmount))}</Text>
            </View> : null
          }
          <View style={[styles.contentItem, { borderBottomWidth: 0 }]}>
            <Text style={styles.textStyle}>操作时间</Text>
            <Text style={styles.textStyle}>{operateTime}</Text>
          </View>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: style.color.bgGray,
  },
  flexRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  listItemNum: {
    fontSize: 20 * scale,
    fontWeight: '600'
  },
  contentBox: {
    backgroundColor: '#fff',
    paddingHorizontal: 4 * scale,
    marginTop: 40 * scale,
    marginHorizontal: 16 * scale,
    paddingVertical: 5 * scale,
    elevation: 1,
    shadowColor: '#F0F3FC',  //  阴影颜色
    shadowOffset: { width: 0, height: 0 },  // 阴影偏移
    shadowOpacity: 1,  // 阴影不透明度
  },
  contentItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    borderBottomWidth: 0.5,
    borderBottomColor: '#E7E7E7',
    paddingVertical: 14 * scale,
    paddingHorizontal: 12 * scale,
  },
  detailImg: {
    width: 6 * scale,
    height: 9 * scale,
    tintColor: '#000',
    marginLeft: 10 * scale
  },
  textStyle: {
    fontSize: 15 * scale,
    color: '#000'
  }
})